<template>
  <div>
    <van-nav-bar title="ig">
      <img
        src="~assets/image/arrow_left.png"
        width="20"
        height="20"
        slot="left"
        @click="leftClick"
        alt=""
      />
    </van-nav-bar>

    <div v-for="(item, index) in dea" :key="index">
      <p :class="{ a: getindex(item.id) }">{{ item.text }}</p>
    </div>

    <!-- 密码输入框 -->
    <van-password-input
      :value="value"
      :gutter="10"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <!-- 数字键盘 -->
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      @blur="showKeyboard = false"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      showup: false,
      dea: [
        { id: 1, text: "11" },
        { id: 2, text: "22" },
        { id: 3, text: "33" },
        { id: 4, text: "44" },
      ],
      value: "",
      showKeyboard: true,
    };
  },
  methods: {
    leftClick() {
      this.$router.back(-1);
    },
    showPopup() {
      this.showup = true;
    },
    getindex(index) {
      console.log(index);
      let is = false;
      if (index == 1) {
        is = true;
      } else {
        if (index == 2) {
          is = true;
        } else {
          is = false;
        }
      }
      return is;
    },
  },
};
</script>

<style scoped>
.a {
  font-size: 100px;
  color: red;
}
</style>